<template>
  <div class="add-art">
    <div class="content">
      <el-form
        label-position="top"
        :model="formFields"
        :rules="formRules"
        ref="insertForm"
        size="small"
        label-width="1rem"
        @submit="submit"
      >
        <el-row :gutter="20">
          <el-col :span="24" :lg="18" :offset="0">
            <el-row :gutter="50">
              <el-col :span="24">
                <el-row :gutter="20">
                  <el-col :span="24" :lg="12" :offset="0">
                    <el-form-item prop="title">
                      <template #label> 文章标题 </template>
                      <el-input
                        class="art-title"
                        v-model.trim="formFields.title"
                        placeholder="请输入文章标题"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" :lg="6" :offset="0">
                    <el-form-item prop="author">
                      <template #label> 文章作者 </template>
                      <el-input
                        class="art-title"
                        v-model.trim="formFields.author"
                        placeholder="请输入文章作者"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="html">
                  <MarkdownEditor />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" :lg="6" :offset="0">
            <div class="setting">
              <el-tabs>
                <el-tab-pane lazy label="基本选项">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="日期" prop="date">
                        <el-date-picker
                          v-model="formFields.createdAt"
                          type="date"
                          :placeholder="formFields.createdAt"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="分类" prop="category">
                        <el-select
                          v-model="formFields.categorry"
                          filterable
                          clearable
                          placeholder="请选择文章分类"
                        >
                          <el-option
                            v-for="item in state.categories"
                            :key="item._id"
                            :label="item.label"
                            :value="item._id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="标签" prop="tags">
                        <el-input
                          v-model="state.tag"
                          placeholder="输入标签回车添加"
                          clearable
                          @clear="state.tag = ''"
                          @keydown.enter="saveTag"
                        >
                          <template #append>
                            <el-button icon="el-icon-plus" @click="saveTag"></el-button>
                          </template>
                        </el-input>
                        <div class="tags-container" v-show="formFields.tags.length">
                          <el-tag
                            v-for="(tag, index) in formFields.tags"
                            size="small"
                            type="info"
                            closable
                            @close="() => closeTag(index)"
                          >
                            {{ tag }}
                          </el-tag>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="封面" prop="cover">
                        <el-input
                          class="art-cover"
                          v-model="formFields.cover"
                          placeholder="填写或上传封面"
                        >
                          <template #append>
                            <el-button icon="el-icon-upload" @click="uploadImg"></el-button>
                          </template>
                        </el-input>
                        <el-image
                          v-show="state.preview"
                          class="art-cover-preview"
                          :src="formFields.cover"
                          fit="fill"
                          :lazy="true"
                        >
                        </el-image>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="摘要" prop="desc">
                        <el-input
                          class="art-desc"
                          v-model="formFields.desc"
                          type="textarea"
                          :rows="3"
                          placeholder="填写或自动摘要"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane lazy label="高级选项">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="权限" prop="auth">
                        <el-select class="art-auth" v-model="formFields.auth">
                          <el-option
                            v-for="item in state.status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
          <el-col :span="24">
            <el-button @click="handelSubmit">handelSubmit</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import MarkdownEditor from '../components/editor.vue'
import { reactive, onMounted, ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { getCategorys } from '../api/category'
import { insertArt } from '../api/art'

const insertForm = ref()

onMounted(async () => {
  let categories = await getCategorys()
  state.categories = categories
})

// 页面状态
const state: any = reactive({
  status: [
    {
      label: '公开',
      value: 0,
    },
    {
      label: '自己可见',
      value: 1,
    },
    {
      label: '登录可见',
      value: 2,
    },
    {
      label: '密码可见',
      value: 3,
    },
  ],
  tag: '',
  select: 0,
  categories: [],
  preview: false,
})

// 表单数据
const formFields = reactive({
  title: '',
  author: '',
  cover: '',
  categorry: '',
  auth: '',
  desc: '',
  tags: [],
  content: '',
  html: '',
  createdAt: dayjs(new Date().getTime()).format('YYYY-MM-DD'), //日期
})
// 表单验证
const formRules = reactive({
  title: {
    required: true,
    message: '请填写文章标题',
    trigger: ['blur', 'change'],
  },
  author: {
    required: true,
    message: '请填写作者',
    trigger: ['blur', 'change'],
  },
  // category: {
  //   required: true,
  //   message: '请选择文章分类',
  //   trigger: ['blur', 'change'],
  // },
  // cover: {
  //   required: true,
  //   message: '请选择一个文章封面',
  // },
  // tags: {
  //   required: true,
  //   message: '请填写至少一个文章标签',
  // },
})

// 保存标签
const saveTag = () => {
  if (!state.tag) return
  if (state.tag.length > 8) {
    ElMessage.warning('标签最多8个字！')
    return
  }
  formFields.tags.length < 5
    ? (formFields.tags as Array<String>).push(state.tag)
    : ElMessage.warning('最多添加五个标签哦！')
  state.tag = ''
}
// 删除标签
const closeTag = (index: number) => {
  formFields.tags.splice(index, 1)
}

// 加载封面图片
const uploadImg = () => {
  state.preview = !formFields.cover
}
// 提交表单
const submit = (e: any) => {
  console.log(e)
}
const handelSubmit = async () => {
  const isPass = await insertForm.value.validate()
  if (!isPass) return
  const artInfo = {
    ...formFields,
  }
  console.log(artInfo)
  // const ret = await insertArt(artInfo)
}
</script>

<style lang="scss" scoped>
.add-art {
  width: 100%;
  height: auto;
  user-select: none;
  background-color: #fff;
  .content {
    padding: 15px;
    .tags-container {
      padding: 10px 0;
      .el-tag {
        margin: 5px;
      }
    }

    .art-cover-preview {
      margin-top: 15px;
    }
  }
}
</style>
